<template>
    <div class="treeDatamoduleView">
        <div class="treeRowView">
            <div class="itemView" v-for="(item,index) in getTreeData" :key="index">
                <span class="titleNameText">{{ item.itemName }}</span>
                <el-input v-if="item.itemType!='NUMBER'" style="width:80%" size="small" v-model="item.value"
                    :placeholder="item.placeholder ? item.placeholder : '请输入'">
                    <template v-if="item.isShowunit?item.unitName:''" slot="append">{{item.unitName}}</template>
                </el-input>
                <div v-if="item.itemType=='NUMBER'" class="rowNUMBER">
                    <el-input class="inputNUMBERView" style="width: calc(50% - 42px);" size="small"
                        v-model="item.startValue" :type="'number'"
                        :placeholder="item.placeholder ? item.placeholder : '请输入'" clearable>
                    </el-input>
                    到
                    <el-input class="inputNUMBERView" style="width: calc(50% + 26px);" size="small"
                        v-model="item.endValue" :type="'number'"
                        :placeholder="item.placeholder ? item.placeholder : '请输入'" clearable>
                        <template v-if="item.isShowUnit?item.unitName:''" slot="append">{{item.unitName}}</template>
                    </el-input>
                </div>
            </div>
        </div>
        <div class="treeCView">
            <div v-for="(items,indexs) in treeDatas" :key="indexs" class="treeCItemView">
                <span class="titleNameText2">{{items.itemName}}：</span>
                <TreeInput :data="items.childrenList"></TreeInput>
            </div>
        </div>
        <!-- <span class="titleNameText">{{ treeData.itemName }}</span>
        <div class="flex-r-c" v-if="treeData.childrenList">
            <div v-for="(children,i) in treeData.childrenList" :key="i">
                <TreeInput :treeData="children"></TreeInput>
            </div>
        </div>
        <div class="flex-r-c" v-if="!treeData.childrenList">
            <el-input v-if="treeData.itemType!='NUMBER'" style="width:240px" size="small" v-model="treeData.value"
                :placeholder="treeData.placeholder ? treeData.placeholder : '请输入'">
                <template v-if="treeData.unitName" slot="append">{{treeData.unitName}}</template>
            </el-input>

            <div v-if="treeData.itemType=='NUMBER'" class="rowNUMBER">
                <el-input style="width:100px" size="small" v-model="treeData.startValue" :type="'number'"
                    :placeholder="treeData.placeholder ? treeData.placeholder : '请输入'" clearable>
                </el-input>
                到
                <el-input style="width:140px" size="small" v-model="treeData.endValue" :type="'number'"
                    :placeholder="treeData.placeholder ? treeData.placeholder : '请输入'" clearable>
                    <template v-if="treeData.unitName" slot="append">{{treeData.unitName}}</template>
                </el-input>
            </div>
        </div> -->
    </div>
</template>

<script>
export default ({
    name: 'TreeInput',
    components: {},
    props: {
        data: {
            type: [Array, Object, Number],
            default: () => [],
        },
    },
    data() {
        return {
            treeDatas: []
        }
    },
    mounted() {
        // console.log('treeData', this.treeData)
    },
    methods: {},
    computed: {
        getTreeData() {
            let data = this.data
            let datas = []
            let treeDatas = []
            for (let e in data) {
                if (!data[e].childrenList) {
                    datas.push(data[e])
                } else {
                    treeDatas.push(data[e])
                }
            }

            this.treeDatas = treeDatas
            return datas
        }
    },
})
</script>

<style lang="scss" scoped>
.treeDatamoduleView {
    width: 100%;
    // margin-top: 12px;




    .treeRowView {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        // margin-top: 4px;

        .itemView {
            width: 33%;
            min-width: 350px;
            display: flex;
            flex-direction: column;
            margin-bottom: 8px;
        }
    }

    .treeCView {
        display: flex;
        flex-direction: column;

        .treeCItemView {
            display: flex;
            flex-direction: column;
        }
    }

    .titleNameText {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #667595;
        line-height: 22px;
        text-align: left;



        // .rowNUMBER>>>
    }

    .titleNameText2 {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #667595;
        line-height: 14px;
        margin-top: 12px;
    }

    .rowNUMBER {
        width: 80%;
        display: flex;
        flex-direction: row;
        align-items: center;
        -webkit-appearance: none;
        background-color: #FFF;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #606266;
        /* display: inline-block; */
        font-size: inherit;

        .inputNUMBERView {
            // margin: 0px !important;
            // padding: 0px !important;




            // width: ;

            // .el-input__inner {
            //     padding: 0px !important;
            // }
        }

        // .el-input__inner {
        //     
        // }
    }
}
</style>